<template>
  <div class="real-hidden">
    <div class="title"></div>
    <div class="main">
      <div class="item">
        <p>隐患总数（个）</p>
        <p>11815</p>
      </div>
      <div class="item">
        <p>物联网隐患（个）</p>
        <p>11591</p>
      </div>
      <div class="item">
        <p>监督隐患（个）</p>
        <p>11</p>
      </div>
      <div class="item">
        <p>高层建筑隐患（个）</p>
        <p>5</p>
      </div>
      <div class="item">
        <p>商业综合体隐患（个）</p>
        <p>6</p>
      </div>
      <div class="item">
        <p>其他隐患（个）</p>
        <p>2</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

defineComponent({ name: 'OpinionTrends' });
</script>

<style scoped lang="scss">
.real-hidden {
  @apply w-full h-[162px] flex flex-col justify-between;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[102px] pl-[22px] flex justify-between;

    .item {
      @apply w-[178px] h-full pl-[18px] flex flex-col justify-center;

      p:first-child {
        @apply text-[16px];
      }

      p:last-child {
        @apply text-[32px] font-bold;
        font-family: D-DIN-PRO;
      }

      &:first-child {
        background: url('./assets/yh.png') no-repeat center;
      }

      &:nth-child(2) {
        background: url('./assets/wlw.png') no-repeat center;
      }

      &:nth-child(3) {
        background: url('./assets/jd.png') no-repeat center;
      }

      &:nth-child(4) {
        background: url('./assets/gc.png') no-repeat center;
      }

      &:nth-child(5) {
        background: url('./assets/qt.png') no-repeat center;
      }

      &:last-child {
        background: url('./assets/yh.png') no-repeat center;
      }
    }
  }
}
</style>
